<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js树形导航菜单制作垂直js导航条特效</title>
<meta name="description" content="js树形导航菜单制作一个垂直纵向js导航条只设置导航二级菜单分类，点击显示隐藏二级菜单目录。内含js代码下载。" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#5e5e5e;font-size:12px;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* nav_menu */
.nav_menu{width:560px;margin:100px auto;}
.nav_menu dl{background:url(images/verline.gif) repeat-y 4px 0;}
.nav_menu dl dt a{height:24px;line-height:24px;overflow:hidden;color:#3366cc;font-weight:800;}
.nav_menu dl dt a span{display:inline-block;width:13px;height:15px;overflow:hidden;float:left;margin:0 5px 0 0;}
.nav_menu dl dt a.minus span{background:url(images/showbtn.gif) no-repeat;}
.nav_menu dl dt a.plus span{background:url(images/hidebtn.gif) no-repeat;}
.nav_menu dl dd li{height:24px;line-height:24px;background:url(images/lineleft.gif) no-repeat 4px -6px;padding:0 0 0 18px}
</style>

<script type="text/javascript">
function getObject(objectId){
	if(document.getElementById && document.getElementById(objectId)){
		return document.getElementById(objectId);
	}else if(document.all && document.all(objectId)){
		return document.all(objectId);
	}else if(document.layers && document.layers[objectId]){
		return document.layers[objectId];
	}else{
		return false;
	}
}

function showHide(e,objname){
	var obj = getObject(objname);
	if(obj.style.display == "none"){
		obj.style.display = "block";
		e.className="minus";
	}else{
		obj.style.display = "none";
		e.className="plus";
	}
}
</script>

	<div class="nav_menu"> 
	
		<dl> 
			<dt><a href="javascript:void(0);" class="minus" onclick="showHide(this,'items0');"><span></span>jquery表单特效</a></dt> 
			<dd id="items0"> 
				<ul>
					<li><a href="http://www.jsfoot.com/jquery/form/yz/2012-03-19/446.html">jquery表单验证 formvalidator 插件解决整站提交表单验证问题</a></li>
					<li><a href="http://www.jsfoot.com/jquery/form/qxfx/2011-10-26/227.html">jquery checkbox 选中 取消 checkbox多选框点击事件控制显示隐藏</a></li>
					<li><a href="http://www.jsfoot.com/jquery/form/mh/2011-10-23/221.html">jquery 表单美化 input文本框模拟select选择框获取选定的value值</a></li>
					<li><a href="http://www.jsfoot.com/jquery/form/ssts/2011-09-24/203.html">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></li>
					<li><a href="http://www.jsfoot.com/jquery/form/mh/2011-08-30/155.html">jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框</a></li>
					<li><a href="http://www.jsfoot.com/jquery/form/mh/2011-08-03/100.html">jquery 表单美化用jquery 表单插件美化单选按钮radio和复选按钮checkbox</a></li>
					<li><a href="http://www.jsfoot.com/jquery/form/qxfx/2011-08-02/97.html">jquery复选框 全选 反选 取消 选中输出等功能用jquery特效和jquery插件两种表单特效</a></li>
				</ul>
			</dd> 
		</dl> 
	
		<dl> 
			<dt><a href="javascript:void(0);" class="plus" onclick="showHide(this,'items1');"><span></span>js图片特效</a></dt> 
			<dd id="items1" style="display:none;"> 
				<ul>
					<li><a href="http://www.jsfoot.com/js/images/qh/2012-03-22/480.html">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
					<li><a href="http://www.jsfoot.com/js/images/qh/2012-03-15/422.html">js图片特效制作百叶窗滤镜轮播效果js焦点图片切换</a></li>
					<li><a href="http://www.jsfoot.com/js/images/cj/2012-03-14/420.html">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
					<li><a href="http://www.jsfoot.com/js/images/cj/2011-08-08/110.html">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><a href="http://www.jsfoot.com/js/images/cj/2011-08-07/108.html">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
					<li><a href="http://www.jsfoot.com/js/images/cj/2011-08-05/104.html"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
					<li><a href="http://www.jsfoot.com/js/images/cj/2011-07-24/80.html"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></li>
				</ul> 
			</dd> 
		</dl>
	</div>

</body>
</html>
